<template>
  <div class="maillist">
    <div class="listcontent">
      <h1>通讯录</h1>
      <div class="list_box">
        <ul>
          <li class="flex_box mail_item" :class="index==acticeIndex?'active':''" @click="choose(item)" v-for="(item,index) in mail" :key='index'>
            <p class="icon_box" :class="index==1?'orange_bg':''">
              <span class="iconfont" :class="item.icon"></span>
            </p>
            <span class="flex1">{{item.name}}</span>
          </li>
        </ul>
        <ul>
          <li v-for="item in list" :key='item.id' class="list">
            <div class="company_info flex_box" @click="itemChange(item)" :class="item.isShow?'active':''">
              <p class="icon_box gray_bg">
                <span class="iconfont" :class="item.icon"></span>
              </p>
              <span class="flex1">{{item.name}}</span>
            </div>
            <ul class="children_list" v-show="item.isShow">
              <li v-for="item1 in item.children" :key='item1.id' class="child flex_box" @click="choose(item1)">
                <span class="iconfont" :class="item1.icon"></span>
                <span class="flex1 name">{{item1.name}}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="maincontent">
      <h1>{{mail[acticeIndex].name}}</h1>
      <ul>
        <li v-for="item in userlist" :key='item.id' class="flex_box user_item">
          <el-image style="width: 36px; height: 36px;" v-if="item.avatar" :src="item.avatar" fit="fill" class="avatar"></el-image>
          <p class="avatar" v-else>{{getImg(item.userName)}}</p>
          <div class="flex1">
            <p class="name">{{item.name}}</p>
            <span class="info" v-if="item.info">{{item.info}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mail:[
        {
          icon:'icon-lianxiren1',
          name:'常用联系人',
          children:[
            {
              id:1,
              name:'申科',
              avatar:require('@/assets/images/avatar.jpg')
            }
          ]
        },
        {
          icon:'icon-xinhaoyou',
          name:'新的好友',
          children:[
            {
              id:1,
              name:'吴燕丽',
              avatar:require('@/assets/images/avatar.jpg')
            }
          ]
        },
        {
          icon:'icon-qunliao',
          name:'我的好友',
          children:[
            {
              id:1,
              name:'申科',
              avatar:require('@/assets/images/avatar.jpg')
            }
          ]
        },
        {
          icon:'icon-lianxiren',
          name:'我的群组',
          children:[
            {
              id:1,
              name:'申科',
              avatar:require('@/assets/images/avatar.jpg')
            }
          ]
        }
      ],
      list:[
        {
          id:1,
          name:'卡德曼信息技术',
          icon:'icon-zuzhijiagou',
          children:[
            {
              id:11,
              name:'组织架构',
              icon:'icon-xiaji',
              children:[
                {
                  id:1,
                  name:'吴燕丽',
                  info:'房团会',
                  avatar:require('@/assets/images/avatar.jpg')
                }
              ]
            },
            {
              id:12,
              name:'董事会-研发部',
              icon:'icon-xiaji',
              children:[]
            },
            {
              id:212,
              name:'组织架构',
              icon:'icon-xiaji',
              children:[]
            },
            {
              id:232,
              name:'董事会-研发部',
              icon:'icon-xiaji',
              children:[]
            }
          ]
        },
        {
          id:2,
          name:'卡德曼信息技术',
          icon:'icon-zuzhijiagou',
          children:[
            {
              id:21,
              name:'组织架构',
              icon:'icon-xiaji',
              children:[]
            },
            {
              id:22,
              name:'董事会-研发部',
              icon:'icon-xiaji',
              children:[]
            },
            {
              id:221,
              name:'组织架构',
              icon:'icon-xiaji',
              children:[]
            },
            {
              id:223,
              name:'董事会-研发部',
              icon:'icon-xiaji',
              children:[]
            }
          ]
        }
      ],
      acticeIndex:0,
      userlist:[]
    }
  },
  mounted() {
    this.userlist = this.mail[0].children
  },
  methods:{
    choose(item) {
      this.name = item.name
      this.userlist = item.children
    },
    itemChange(item) {
      if (item.isShow) {
        item.isShow = false
      } else {
        this.$set(item,'isShow',true)
      }
    },
    // 如果没有头像，截取姓名后两位
    getImg(name) {
      let len = name.length
      if(len <= 2) {
        return name
      } else {
        return name.slice(len-2)
      }
    },
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/stylus/variable'
.maillist
  display: flex
  height: 100%
  .listcontent
    width: 260px
    border-right: 1px solid #eee
    padding 10px
    box-sizing border-box
    position relative
    h1
      font-size 16px
      color #666
      margin-bottom: 10px
      padding 10px
    .list_box
      overflow-y: auto
      height: calc(100% - 56px)
      &::-webkit-scrollbar
        display: none;/*隐藏滚动条*/
    .mail_item
      padding 10px
      margin-bottom: 5px
      font-size 14px
      cursor pointer
      &:hover
        background #f2f2f2
      &.active
        background #f2f2f2
    .icon_box
      width: 36px
      height: 36px
      text-align: center
      line-height: 36px
      background $theme-color
      border-radius: 4px
      margin-right 10px
      color #fff
    .list
      padding 10px 0
      border-top 1px solid #eee
    .company_info
      padding 10px
      margin-bottom: 5px
      font-size 14px
      cursor pointer
      position relative
      &::after
        display: block
        content ''
        position: absolute
        right: 10px
        top 50%
        transform: translateY(-50%)
        border-width: 5px
        border-style solid
        border-color #999 transparent transparent transparent
      &.active
        &::after
          border-color transparent transparent #999 transparent
      &:hover
        background #f2f2f2
    .gray_bg
      background #ccc
    .orange_bg
      background: orange
    .children_list
      font-size 14px
      color #333
      .child
        padding 10px 10px 10px 20px
        cursor pointer
        &:hover
          background #f2f2f2
        .iconfont
          margin-right 10px
          font-size 12px
          color #ccc
  .maincontent
    flex 1
    min-width: 0
    padding 20px
    font-size 14px
    h1
      margin-bottom: 20px
    .user_item
      cursor pointer
    .avatar
      width: 40px
      height: 40px
      margin-right 10px
    .name 
      line-height 20px
    .info
      font-size 12px
      color #999
      line-height: 20px
</style>